Add share button

2 files changed, 10 insertions, 4 deletions

diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx
index ca50762..07cf17f 100644
--- a/src/app/groups/[groupId]/layout.tsx
+++ b/src/app/groups/[groupId]/layout.tsx
@@ -42,7 +42,7 @@ export default async function GroupLayout({
 
         <div className="flex gap-2 justify-between">
           <GroupTabs groupId={groupId} />
-          <ShareButton groupId={groupId} />
+          <ShareButton group={group} />
         </div>
       </div>
 
diff --git a/src/app/groups/[groupId]/share-button.tsx b/src/app/groups/[groupId]/share-button.tsx
index 808f3a0..fe2e5fb 100644
--- a/src/app/groups/[groupId]/share-button.tsx
+++ b/src/app/groups/[groupId]/share-button.tsx
@@ -1,4 +1,5 @@
 import { CopyButton } from '@/components/copy-button'
+import { ShareUrlButton } from '@/components/share-url-button'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import {
@@ -7,14 +8,15 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { env } from '@/lib/env'
+import { Group } from '@prisma/client'
 import { Share } from 'lucide-react'
 
 type Props = {
-  groupId: string
+  group: Group
 }
 
-export function ShareButton({ groupId }: Props) {
-  const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${groupId}`
+export function ShareButton({ group }: Props) {
+  const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${group.id}`
 
   return (
     <Popover>
@@ -31,6 +33,10 @@ export function ShareButton({ groupId }: Props) {
         <div className="flex gap-2">
           <Input className="flex-1" defaultValue={url} readOnly />
           <CopyButton text={url} />
+          <ShareUrlButton
+            text={`Join my group ${group.name} on Spliit`}
+            url={url}
+          />
         </div>
         <p>
           <strong>Warning!</strong> Every person with the group URL will be able